<template>
	<div class="main-home">
		<!--		<h2>user</h2>-->
		<div class="device-monitor-info">
			
			<div class="device-singlechip-info">
				<h5>中控板信息</h5>
				<div class="device-singlechip-info-div">
					<div class="device-singlechip-info-left">
						<div>
							<el-text>ID：</el-text>
							<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.id }}</el-tag>
						</div>
						<div>
							<el-text>设备名称：</el-text>
							<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.name }}</el-tag>
						</div>
						<div>
							<el-text>时间：</el-text>
							<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.time }}</el-tag>
						</div>
						<div>
							<el-text>设备状态：</el-text>
							<!--正常状态-->
							<el-tag v-if="data.deviceSinglechipInfo.status==status[0].code" type="primary"
							        effect="light"
							        round>{{ status[0].msg }}
							</el-tag>
							<!--关机状态-->
							<el-tag v-else-if="data.deviceSinglechipInfo.status==status[1].code" type="warning"
							        effect="light" round>{{ status[1].msg }}
							</el-tag>
							<!--异常状态-->
							<el-tag v-else-if="data.deviceSinglechipInfo.status==status[2].code" type="danger"
							        effect="light"
							        round>{{ status[2].msg }}
							</el-tag>
						</div>
					</div>
					<div class="device-singlechip-info-right">
						<el-icon size="120">
							<!--							<Monitor/>-->
							<!--							<Platform/>-->
							<Iphone/>
						</el-icon>
					</div>
				</div>
			</div>
			<div class="device-dynamic-info">
				<h5>设备实时数据</h5>
				<div class="device-dynamic-info-div">
					<div class="device-dynamic-info-left">
						<div class="device-dynamic-data-left">
							<div>
								<el-text>温度：</el-text>
								<el-tag type="primary" effect="light" round>{{ data.deviceDynamicInfo.temperature }} ℃
								</el-tag>
							</div>
							<div>
								<el-text>湿度：</el-text>
								<el-tag type="primary" effect="light" round>{{ data.deviceDynamicInfo.humidness }} %
								</el-tag>
							</div>
							<div>
								<el-text>光照：</el-text>
								<el-tag type="primary" effect="light" round>{{ data.deviceDynamicInfo.illumination }}
									Lux
								</el-tag>
							</div>
							<div>
								<el-text>烟雾：</el-text>
								<el-tag type="primary" effect="light" round>{{ data.deviceDynamicInfo.illumination }}
								</el-tag>
							</div>
						</div>
						<div v-if="false" class="device-dynamic-data-right">
							<div>
								<el-text>ID：</el-text>
								<el-tag type="primary" effect="light" round>{{ data.deviceSinglechipInfo.id }}</el-tag>
							</div>
							<div>
								<el-text>设备名称：</el-text>
								<el-tag type="primary" effect="light" round>{{
										data.deviceSinglechipInfo.name
									}}
								</el-tag>
							</div>
							<div>
								<el-text>时间：</el-text>
								<el-tag type="primary" effect="light" round>{{
										data.deviceSinglechipInfo.time
									}}
								</el-tag>
							</div>
							<div>
								<el-text>设备状态：</el-text>
								<!--正常状态-->
								<el-tag v-if="data.deviceSinglechipInfo.status==status[0]" type="primary" effect="light"
								        round>开机
								</el-tag>
								<!--关机状态-->
								<el-tag v-else-if="data.deviceSinglechipInfo.status==status[1]" type="warning"
								        effect="light" round>关机
								</el-tag>
								<!--异常状态-->
								<el-tag v-else-if="data.deviceSinglechipInfo.status==status[2]" type="danger"
								        effect="light"
								        round>设备异常
								</el-tag>
							</div>
						</div>
					</div>
					<div class="device-dynamic-info-right">
						<el-icon size="120">
							<Odometer/>
						</el-icon>
					</div>
				</div>
			</div>
		</div>
		<!--有数据-->
		<div>
			<!--数据列表-->
			<div class="main-content">
				<h2 style="margin-bottom: 2vw">设备历史警报信息</h2>
				<el-table :data="data.list" @selection-change="handleDeleteListClick" highlight-current-row stripe
				          style="width: 100%;">
					<el-table-column type="selection" width="55"/>
					<el-table-column prop="createTime" label="注册时间" sortable align="center"/>
					<el-table-column prop="createTime" label="设备名称" align="center" show-overflow-tooltip/>
					<el-table-column prop="username" label="报警级别" sortable show-overflow-tooltip>
						<template #default="scope">
							<el-tag v-if="scope.row.roleType===grade[0].name" type="primary" effect="plain"
							        disable-transitions>{{ grade[0].title }}
							</el-tag>
							<el-tag v-else-if="scope.row.roleType===grade[1].name" type="warning" effect="plain"
							        disable-transitions>{{ grade[1].title }}
							</el-tag>
							<el-tag v-else-if="scope.row.roleType===grade[2].name" type="danger" effect="plain"
							        disable-transitions>{{ grade[2].title }}
							</el-tag>
							<el-tag v-else type="danger" disable-transitions>未知</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="password" label="报警类型" sortable show-overflow-tooltip>
						<template #default="scope">
							<el-tag v-if="scope.row.roleType===grade[0].name" type="primary" effect="plain"
							        disable-transitions>超级管理员
							</el-tag>
							<el-tag v-else-if="scope.row.roleType===grade[1].name" type="warning" effect="plain"
							        disable-transitions>管理员
							</el-tag>
							<el-tag v-else-if="scope.row.roleType===grade[2].name" type="danger" effect="plain"
							        disable-transitions>普通用户
							</el-tag>
							<el-tag v-else type="danger" disable-transitions>未知</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip/>
					<!--
										<el-table-column prop="avatarUrl" label="描述" width="100">
											<template #default="scope">
												<el-avatar :src="scope.row.avatarUrl"/>
											</template>
										</el-table-column>
										<el-table-column prop="email" label="邮箱" width="180" show-overflow-tooltip/>
										<el-table-column prop="phone" label="电话" width="120" sortable/>
										<el-table-column prop="deptName" label="部门" width="120">
											<template #default="scope">
												<el-tag v-show="scope.row.roleName" type="primary" effect="plain">
													{{ scope.row.deptName }}
												</el-tag>
											</template>
										</el-table-column>
										<el-table-column prop="roleName" label="角色名称" width="120">
											<template #default="scope">
												<el-tag v-show="scope.row.roleName" type="primary" effect="plain">{{ scope.row.roleName }}
												</el-tag>
											</template>
										</el-table-column>
										<el-table-column prop="roleType" label="角色类型" width="120">
											<template #default="scope">
												<el-tag v-if="scope.row.roleType===roleType[0].name" type="primary" effect="plain"
														disable-transitions>超级管理员
												</el-tag>
												<el-tag v-else-if="scope.row.roleType===roleType[1].name" type="warning" effect="plain"
														disable-transitions>管理员
												</el-tag>
												<el-tag v-else-if="scope.row.roleType===roleType[2].name" type="danger" effect="plain"
														disable-transitions>普通用户
												</el-tag>
												<el-tag v-else type="danger" disable-transitions>未知</el-tag>
											</template>
											&lt;!&ndash;						<el-tag type="primary" effect="plain">测试角色</el-tag>&ndash;&gt;
										</el-table-column>
										<el-table-column prop="lastLoginIp" label="最近登录IP" width="120"/>
										<el-table-column prop="createTime" label="注册时间" width="180" sortable align="center"/>
										<el-table-column prop="updateTime" label="更新时间" width="180" sortable align="center"/>
										
										
										&lt;!&ndash;
															<el-table-column prop="roleType" label="用户类型" width="120">
																<template #default="scope">
																	<el-tag v-if="scope.row.roleType==='0'" type="primary" effect="plain" disable-transitions>
																		超级管理员
																	</el-tag>
																	<el-tag v-else-if="scope.row.roleType==='1'" type="warning" effect="plain"
																			disable-transitions>管理员
																	</el-tag>
																	<el-tag v-else-if="scope.row.roleType==='2'" type="danger" effect="plain"
																			disable-transitions>普通用户
																	</el-tag>
																	<el-tag v-else type="danger" disable-transitions>按钮</el-tag>
																</template>
															</el-table-column>
															<el-table-column prop="permissions" label="角色权限" width="80" align="center"/>
															<el-table-column prop="remark" label="角色描述" width="180" align="center" show-overflow-tooltip/>
															<el-table-column prop="createBy" label="创建人" width="180" align="center"/>
										&ndash;&gt;
										<el-table-column v-if="false" label="操作" align="center" width="150" fixed="right">
											<template #default="scope">
												<div style="text-align: center">
													<el-button size="small" type="warning" plain
															   @click="handleEditClick(scope.$index, scope.row)">编辑
													</el-button>
													<el-popconfirm class="box-item" width="180"
																   :title="'确定删除 【'+scope.row.userAccount+'】 ？'"
																   icon="" placement="top" confirm-button-type="danger"
																   confirm-button-text="删除"
																   @confirm="handleDelete(scope.$index, scope.row)"
																   persistent>
														<template #reference>
															&lt;!&ndash;									@click="handleDelete(scope.$index, scope.row)"&ndash;&gt;
															<el-button size="small" type="danger" plain>删除</el-button>
														</template>
														<template #actions="{ confirm, cancel }">
															<div class="btn-group" style="text-align: center">
																<el-button size="small" @click="cancel">取消</el-button>
																<el-button type="danger" size="small" @click="confirm">删除</el-button>
															</div>
														</template>
													</el-popconfirm>
												</div>
											</template>
										</el-table-column>
					-->
				</el-table>
				
				<div class="main-content-pagination">
					<el-pagination style="justify-content: center; margin-top: 5vh"
					               v-model:current-page="data.searchForm.current"
					               v-model:page-size="data.searchForm.size"
					               :page-sizes="[10, 30, 50, 100]"
					               layout="total, sizes, prev, pager, next, jumper"
					               :total="data.searchForm.total"
					               @size-change="handleSizeChange"
					               @current-change="handleCurrentChange"
					/>
				</div>
			</div>
			<!--新增/修改 对话框-->
		</div>
	</div>
</template>

<script setup lang="ts">
import { reqList, reqAdd, reqDelete, reqDeleteList, reqEdit } from '@/service/main/monitor.ts'
import { errorMessage, infoMessage, successMessage } from '@/utils/ElMessageUtils.ts'
import { reactive, ref } from 'vue'
import { BASE_URL } from '@/service/config'
import { LocalStorageUtils } from '@/utils/StorageUtils.ts'
import { Iphone, Odometer } from '@element-plus/icons-vue'

/********************************************* 变量区 ************************************************************/
// 部门树。
const defaultProps = {
	children: 'children',
	label: 'deptName'
}

// 报警级别
const grade = [
	{ code: '1', name: 'LOW', title: '低', type: 'primary' },
	{ code: '2', name: 'MEDIUM', title: '中', type: 'warning' },
	{ code: '3', name: 'HIGH', title: '高', type: 'danger' }
]

// 报警类型
const type = [
	{ code: '600', name: 'EXCESS_TEMPERATURE', title: '温度过高', type: '' },
	{ code: '601', name: 'EXCESSIVE_HUMIDITY', title: '湿度过高', type: '' },
	{ code: '602', name: 'SENSOR_INTERRUPT', title: '传感器异常', type: '' }
]

// 设备状态。
const status = [
	{ code: 'ON', msg: '开机' },
	{ code: 'OFF', msg: '关机' },
	{ code: 'ABNORMAL_OFF', msg: '设备异常关机' }
]

const treeRef = ref()


// 数据内容。
let data = reactive({
	// 单片机信息。
	deviceSinglechipInfo: {
		id: '1915613230630825572',
		name: '张三一楼中控台',
		time: '2025-04-27 14:39:26',
		status: 'ABNORMAL_OFF'
	},
	// 实时数据。
	deviceDynamicInfo: {
		// 未开机状态。
		temperature: '--',    /*温度*/
		humidness: '--',      /*湿度*/
		illumination: '--',   /*光照*/
		smog: '--'            /*烟雾*/
		// 初始数据。
		// temperature: '29.6',    /*温度*/
		// humidness: '91.0',      /*湿度*/
		// illumination: '72.0',   /*光照*/
		// smog: '32'            /*烟雾*/
	},
	// 搜索条件。
	searchForm: {},
	// 列表展示内容。
	list: [],
	
	
	dialog: {
		visible: false,
		title: '新增用户',
		isAdd: false,   // 是否添加。
		name: '',// 名称
		btnName: ''
	},
	deleteDialog: {
		visible: false,
		deptId: '',
		deleteName: ''
	},
	uploadUrl: BASE_URL + '/file/upload/',
	// 添加/编辑表单。
	editForm: {},
	// 上传头像所需要的token。
	headers: { token: LocalStorageUtils.getKey('wisdomToken') },
	deleteList: [],
	// 菜单列表。
	menuList: [],
	// 部门列表。
	deptList: [],
	// 角色列表。
	roleList: [{
		value: '0',
		label: '超级管理员'
	}, {
		value: '1',
		label: '管理员'
	}, {
		value: '2',
		label: '普通用户'
	}]
})

/********************************************* API接口 ************************************************************/
// // 获取列表。
// const dataList = function getList(searchData = null) {
// 	reqList(searchData).then(res => {
// 		console.log('reqList.res ====> ', res)
// 		if (res.resultStatus) {
// 			data.list = res.resultData.records
// 		} else {
// 			errorMessage(true, '动态菜单获取失败！！')
// 		}
// 	})
// }
// dataList()

// 搜索框。
function handleSearchClick() {
	// console.log('搜索数据：：：：：', data.searchForm)
	dataList(data.searchForm)
}

// 添加数据。
function addData() {
	// console.log('data.editForm =========> ', data.editForm)
	reqAdd(data.editForm).then(res => {
		if (res.resultStatus) {
			console.log('reqAdd.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
			data.dialog.visible = false
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
	// handleSearchClick()
}

// 修改数据。
function editData() {
	reqEdit(data.editForm).then(res => {
		if (res.resultStatus) {
			console.log('reqEdit.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
			data.dialog.visible = false
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

/**
 * 单条删除。
 * @param type
 * @param index
 * @param row
 */
function handleDelete(index, row) {
	console.log('handleDelete.row =====>  ', row)
	reqDelete(row.userId).then(res => {
		if (res.resultStatus) {
			console.log('reqDelete.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

// 批量删除。
function handleDeleteList() {
	let idList = {
		idList: []
	}
	data.deleteList.forEach((item) => {
		console.log('item ====>', item)
		idList.idList.push(item.userId)
	})
	// console.log("ids =====>",ids)
	reqDeleteList(idList).then(res => {
		if (res.resultStatus) {
			console.log('reqDeleteList.res!', res)
			successMessage(true, res.resultData)
			dataList()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

/********************************************* 事件 ************************************************************/

// 重置搜索框。
function resetSearchClick() {
	data.searchForm = {}
	handleSearchClick()
}

/**
 * 添加。
 * @param type
 * @param index
 * @param row
 */
function handleAddClick() {
	data.dialog = {
		visible: true,
		title: '新增用户',
		isAdd: true,
		name: '名称',
		btnName: '新增'
	}
}

/**
 * 编辑。
 * @param type
 * @param index
 * @param row
 */
function handleEditClick(index = null, row) {
	data.dialog = {
		visible: true,
		title: '编辑用户',
		isAdd: true,
		name: '名称',
		btnName: '编辑'
	}
	console.log('row =====> ', row)
	// 遍历选择。
	data.editForm = row
}

/**
 * 批量删除。
 */
function handleDeleteListClick(newSelection) {
	data.deleteList = newSelection
	console.log('newSelection ====>', newSelection)
	console.log('批量删除！')
}

// 选择选中。
const handleCheckChange = (data, selectData) => {
	// console.log('selectData.checkedKeys ====> ', selectData.checkedKeys)
	setCheckedKeys(selectData.checkedKeys)
}

// 弹窗显示后，显示选中的菜单权限。
const handleDialogOpened = () => {
	// console.log('data.editForm.menuPermissions  ==> ', data.editForm.menuPermissions)
	if (data.editForm.menuPermissions) {
		setCheckedKeys(data.editForm.menuPermissions)
	}
}


const handleSizeChange = (val) => {
	// console.log(`每页 ${val} 条`);
	this.data.searchForm.size = val
	dataList()
}
const handleCurrentChange = (val) => {
	// console.log(`当前页: ${val}`);
	this.data.searchForm.current = val
	dataList()
}

/*-------------------------------------------- start：头像相关函数【文件上传】 -----------------------------------------------*/
// 修改头像图标。
function updateAvatarUrl() {
	// 修改用户头像API接口。
	
	// console.log("修改手机号！！")
	// this.$store.dispatch('updateAvatarUrl', this.userInfo.avatarUrl).then(res => {
	// 	// console.log("updatePhone.res", res);
	// 	if (res !== undefined && res.resultStatus === true) {
	// 		this.$message.success(res.resultData);
	// 		this.getUserInfo()
	// 	}
	// })
}

// 文件上传成功时的钩子。
function handleAvatarSuccess(res, file) {
	// console.log("上传成功！保存头像路径！。。。。")
	// this.imageUrl = URL.createObjectURL(file.raw);
	// console.log("imageUrl ==============>",this.imageUrl);
	// console.log("res ===>",res);
	// console.log("file ===========>",file);
	if (res !== undefined && res.resultStatus === true) {
		data.editForm.avatarUrl = res.resultData
	}
	updateAvatarUrl()  // 调用API接口。
	
}

function handleAvatarError(err, file) {
	// console.log("头像上传失败！",err)
	errorMessage(true, '头像上传失败！' + err)
}

// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
/**
 * 只能上传 jpg 格式图片，且文件大小 < 2MB！
 * @param file
 */
function beforeAvatarUpload(file) {
	// console.log("file ===> ",file);
	const isJPG = file.type === 'image/jpeg'
	const isLt2M = file.size / 1024 / 1024 < 2
	// console.log("上传头像。。。。")
	if (!isJPG) {
		errorMessage(true, '上传头像图片只能是 JPG 格式!')
	} else if (!isLt2M) {
		errorMessage(true, '上传头像图片大小不能超过 2MB!')
	}
	return isJPG && isLt2M
	// return false
}

// // 获取头像token。
// function getAvatarToken() {
// 	console.log('token =======> ', LocalStorageUtils.getKey('wisdomToken'))
// 	data.headers =
// }
//
// getAvatarToken()
/*-------------------------------------------- end：头像相关函数【文件上传】 -----------------------------------------------*/

/********************************************* tree选中数据 ************************************************************/
// 设置值。
const setCheckedKeys = (data) => {
	treeRef.value!.setCheckedKeys(data, false)
}
const getCheckedKeys = () => {
	return treeRef.value!.getCheckedKeys(false)
}
// 重置值。
const resetChecked = () => {
	if (treeRef.value) {
		treeRef.value!.setCheckedKeys([], false)
	}
}

/********************************************* 初始化数据 ************************************************************/
// 清除垃圾数据。
function formClear() {
	data.editForm = {}
	data.dialog = {
		visible: false,
		title: '',
		isAdd: false,
		name: '',
		btnName: '新增'
	}
	resetChecked()
}

// 关闭新增/修改弹窗。
function handleClose() {
	formClear()
	infoMessage(true, '已取消')
}

// 关闭删除弹窗。
function handleDeleteClose() {
	data.deleteDialog.visible = false
	infoMessage(true, '已取消')
}
</script>

<style scoped lang="less">
.device-monitor-info {
	//background-color: white;
	margin-bottom: 20px;
	padding: 5vh 0 2vh 0;
	border-radius: 10px;
	display: flex;
}

.device-singlechip-info {
	width: 50%;
	//background-color: #0a60bd;
	background-color: white;
	padding: 20px;
	margin-right: 30px;
	border-radius: 1vw;
	
	.device-singlechip-info-div {
		display: flex;
		/*垂直排列*/
		flex-direction: row;
		align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
		justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
		
		.device-singlechip-info-left {
			width: 70%;
			//background-color: cadetblue;
			
			div {
				margin: 1vw;
				
				.el-text {
					font-size: 10px;
					display: inline-block;
					text-align: right;
					width: 80px;
					color: black;
				}
				
				.el-tag {
					font-size: 10px;
				}
			}
		}
		
		.device-singlechip-info-right {
			width: 30%;
			text-align: center;
			//background-color: aqua;
			margin-right: 1vw;
		}
	}
}

.device-dynamic-info {
	width: 50%;
	//background-color: #0a60bd;
	background-color: white;
	padding: 20px;
	border-radius: 1vw;
	
	.device-dynamic-info-div {
		display: flex;
		/*垂直排列*/
		flex-direction: row;
		align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
		justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
		
		
		.device-dynamic-info-left {
			width: 80%;
			display: flex;
			//background-color: cadetblue;
			
			.device-dynamic-data-left, .device-dynamic-data-right {
				div {
					margin: 1vw;
					
					.el-text {
						font-size: 10px;
						display: inline-block;
						text-align: right;
						width: 50px;
						color: black;
					}
					
					.el-tag {
						font-size: 10px;
					}
				}
			}
			
		}
		
		.device-dynamic-info-right {
			width: 30%;
			text-align: center;
			//background-color: aqua;
			margin-right: 1vw;
		}
	}
}


.main-content {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
}

.main-content-btn {
	margin-bottom: 20px;
}

.main-content-pagination {
	display: block;
	text-align: center;
	width: 100%;
}

:global(.el-popconfirm__main) {
	color: red;
	text-align: center;
	white-space: pre-line;
}


.icon-list {
	display: inline-block;
	width: 35px;
	height: 35px;
}

.select-option {
	display: inline-block;
}

/************************************************ start：头像样式 *************************************************/
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	border: 2px dashed #d9d9d9;
	width: 178px;
	height: 178px;
	text-align: center;
}

/************************************************ end：头像样式 *************************************************/
</style>